// components/gauge/gauge.js
import * as echarts from '../ec-canvas/echarts';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    option: {
      type: Object,
      value: null
    },
    full: {
      type: Boolean,
      value: false
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true, // 懒加载
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initchart(this.data.option)
      this.initchart(this.data.full)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
    this.initchart(this.data.option)
    this.initchart(this.data.full)
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 数据监听器
   */
  observers: {
    'option': function(val){
      this.initchart(val)
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadchart(data){
      // 绑定组件（ec-canvas标签的id）
      let ec_canvas = this.selectComponent('#mychart-dom-gauge');
      ec_canvas.init((canvas,width,height,dpr)=>{
        const chart =echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示的问题
				})
				// wx.createSelectorQuery().select('.circle02').boundingClientRect((res)=>{
				// 	console.log(res)
				
				// }).exec()
        // echart表格的内容配置
				let data = {
					xdata:[],
					ydata:[]
        }
        for(let i = 0;i<20;i++){
          data.xdata.push(i<10?`0${i}:00`:`${i}:00`)
          data.ydata.push(0)
        }
				let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top:'7%',
            left: '5%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: data.xdata,
              // x轴文字倾斜
							axisLabel:{
								rotate:45,//倾斜度 -90 至 90 默认为0
							},
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
								show: false //y轴线消失
							},
							axisTick: {
								show: false //y轴坐标点消失
							},
							axisLabel: {
                show:false,
								textStyle: {
								  color: '#ffffff',
								}
							},
							splitLine :{    //网格线
								lineStyle:{
									type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
								},
								show:true //隐藏或显示
							}
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: data.ydata
            }
          ]
        };
			
        // let baifen = option.series[0].data[0].value / option.series[0].max
        // option.series[0].axisLine.lineStyle.color.unshift([baifen,'rgb(76,104,239)'])
        if(this.data.option){
            chart.setOption(this.data.option?this.data.option:option)
        }else{
            return
        }
        // chart.setOption(this.data.option?this.data.option:option);
        return chart;
      })
    },
    initchart(data){
      // 传递后台数据到图表中，进行懒加载图表
      this.loadchart(data);
    },
  }
})
